import {Component, OnInit, Injector, ViewChild, ElementRef} from '@angular/core';

import {loadModules} from 'esri-loader';
import esri = __esri;
import {AppComponentBase} from '@shared/common/app-component-base';
import { ServiceProxy, WarnInfoDTO } from '@shared/service-proxy/service-proxies';
import {AppConsts} from "@shared/AppConsts";

@Component({
  selector: 'app-report-address-modal',
  templateUrl: './report-address-modal.component.html',
  styleUrls: ['./report-address-modal.component.less']
})
export class ReportAddressModalComponent extends AppComponentBase implements OnInit {
  @ViewChild('mapViewNode') private mapViewEl: ElementRef;
  isVisible: boolean = false;
  model: WarnInfoDTO;

  constructor(injector: Injector,
    private _service: ServiceProxy) {
    super(injector);
  }

  ngOnInit() {
  }

  async initializeMap() {
    try {
      const [
        Map,
        MapView,
        ScaleBar,
        TileLayer,
        Graphic] = await loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/widgets/ScaleBar',
        'esri/layers/TileLayer',
        "esri/Graphic",
        'dojo/domReady!'
      ], {
        url: AppConsts.arcgisMapUrl,         css: AppConsts.arcgisStyleUrl
      });

      // Set type of map
      const map: esri.Map = new Map({
        // basemap: this._basemap
        layers: new TileLayer({
          url: AppConsts.arcgisMapServerUrl
        })
      });

      const center = [this.model.postionLng,this.model.postionLat];
      const mapView: esri.MapView = new MapView({
        container: this.mapViewEl.nativeElement,
        center: center,
        zoom: this._zoom,
        map: map
      });

      // All resources in the MapView and the map have loaded.
      // Now execute additional processes
      mapView.when(() => {
        // First create a point geometry (this is the location of the Titanic)
        const scaleBar = new ScaleBar({
          view: mapView,
          unit: "dual" // The scale bar displays both metric and non-metric units.
        });
        mapView.ui.add(scaleBar, "bottom-left");

        let point = {
          type: "point", // autocasts as new Point()
          longitude: this.model.postionLng,
          latitude: this.model.postionLat
        };


        // Create a symbol for drawing the point
        let markerSymbol = {
          type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
          url: "/assets/images/icon-location.png",
          width: "25px",
          height: "25px"
        };

        let lineAtt = this.model;

        // Create a graphic and add the geometry and symbol to it
        let pointGraphic = new Graphic({
          geometry: point,
          symbol: markerSymbol,
          attributes: lineAtt,
          popupTemplate: { // autocasts as new PopupTemplate()
            title: "{warnTypeName}",
            content: [{
              type: "fields",
              fieldInfos: [{
                fieldName: "lockCode",
                label: this.l("lockset_no")
              }, {
                fieldName: "containerCode",
                label: this.l("container_no")
              }, {
                fieldName: "transportCode",
                label: this.l("car_no")
              }, {
                fieldName: "msg",
                label: this.l("warn_type")
              }, {
                fieldName: "warnTime",
                label: this.l("get_date")
              }]
            }]
          }
        });


        // Add the graphics to the view's graphics layer
        mapView.graphics.add(pointGraphic);
      });


    } catch (error) {
      console.log('We have an error: ' + error);
    }

  }

  show(id: string): void {
    
    this._service.getWarnInfoByIdUsingGET(id).subscribe(result=>{
      this.model = result.result;

      if(this.model.warnType=="5"||this.model.warnpostion=="0.0,-0.0")
      {
        this.notification.info(this.l("notification_erro"),this.l("warn_gps_lost"));
      }
      else{
        this.isVisible = true;
        this.initializeMap();
      }
    })
  }

  close() {
    this.isVisible = false;
  }
}

